<template>
  <vue3ScrollSeamless :dataList="listData" class="warpWeihu"  :classOptions="classOption">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <div class="liItem">
          <span v-text="item.date"></span>
          <span class="gapStyle" v-text="item.onwer"></span>
          <span class="gapStyle">的</span>
          <span class="gapStyle" v-text="item.code"></span>
          <span class="gapStyle" v-text="item.msg"></span>
          <span class="gapStyle">，请及时处理!!!</span>
        </div>

      </li>
    </ul>
  </vue3ScrollSeamless>
</template>
<script>
import {vue3ScrollSeamless} from "vue3-scroll-seamless";
import {getEquipCheckList} from '/@/api/visualizing/master'
import lodash from 'lodash'
//https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/01-basic.html
export default {
  components: {
    vue3ScrollSeamless
  },
  data() {
    return {
      listData: [],
      enumTitle: ['点检', '周检', '月检', '保养'],
      enumTitleEnum:{
        'D001':'开机了',
        'D002':'点检',
        'D003':'周检',
        'D004':'月检',
        'D005':'手动发送'
      },
      classOption: {
          step: 1,
          waitTime: 10000,
          switchDelay: 10000,
          singleHeight: 70,
        }
    }
  },
  methods: {
    runGetEquipCheckList() {
      getEquipCheckList().then(({code,data}) => {
        const list = lodash.get(data, 'list', []);
        this.listData = list.map(item => {
          let msg = `需要进行${this.enumTitleEnum[item.evType]}`
          if(item.evData && item.evData?.length > 0 && item.evData?.length < 14){
            msg = item.evData
          }
          return {
            code: item.equipNum,
            onwer: item.customerId,
            msg: msg,
            date: item.evTime
          }
        })
      })
    },
    randomTimeInSeconds() {
      // 获取当前时间
      const now = new Date();

      // 获取当天的 0 点时间戳
      const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());

      // 获取当前时间与当天 0 点之间的秒数
      const secondsSinceStartOfDay = Math.floor((now - startOfDay) / 1000);

      // 生成一个随机的秒数，范围是 0 到 当天秒数
      const randomSeconds = Math.floor(Math.random() * (secondsSinceStartOfDay + 1));

      // 根据随机秒数计算出随机时间
      const randomTime = new Date(startOfDay.getTime() + randomSeconds * 1000);
      // 输出随机时间的秒数
      return Math.floor(randomTime.getTime() / 1000);
    },
    generateRandomData() {
      const listData = [];
      for (let i = 0; i < 10; i++) {
        listData.push({
          code: `设备${Math.floor(Math.random() * 100)}`,
          onwer: `用户${Math.floor(Math.random() * 100)}`,
          msg: this.enumTitle[Math.floor(Math.random() * 4)],
        });
      }
      this.listData = listData;
    }
  },
  mounted() {
    this.runGetEquipCheckList();
    //this.generateRandomData();
  }
}
</script>
<style lang="less" scoped>
.warpWeihu {
  height: 200px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li {
      display: block;
      height: 60px;
      line-height: 60px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      box-sizing: border-box;
    }
  }
}

.liItem {
  border: 1px solid rgba(25, 186, 139, .17);
  width: 100%;
  padding-left: 10px;
  color: rgb(243, 219, 92);
  //color: #8489a4;
  font-size: 25px;
  //禁止文字换行
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.gapStyle {
  margin-left: 5px;
}</style>